<!--
 * @Author: Soulmate
 * @Date: 2023-10-17 08:44:23
 * @LastEditTime: 2023-11-14 15:10:33
 * @LastEditors: Soulmate
 * @Description: 
 * @FilePath: \ruoyi-ui-vue3\src\views\ability\map\index.vue
 * 版权声明
-->
<style lang="scss" scoped>
.app-container {
    width: 100%;
    height: calc(100vh - 84px);
    padding: 2px;
    .mapContainer {
        width: 100%;
        position: relative;
        height: 100%;
        .map-type {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 999;
        }
        .map {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            border: 1px solid #eee;
        }
        .tools {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 30px;
        }
    }
}
</style>

<template>
    <div class="app-container">
        <div class="mapContainer">
            <el-row class="mb-4 map-type">
                <el-button type="danger" @click="mapType = 'GD'" :plain="mapType == 'GD' ? false : true">高德地图</el-button>
                <el-button type="success" @click="mapType = 'BD'" :plain="mapType == 'BD' ? false : true">百度地图</el-button>
                <el-button type="warning" @click="mapType = 'LEAF'" :plain="mapType == 'LEAF' ? false : true">LeafLetMap</el-button>
            </el-row>
            <div class="map">
                <GD v-if="mapType == 'GD'" :mapConfig="mapConfig" />
            </div>
            <div class="tools">
                <Tools @handleMapEvent="handleMapEvent" />
            </div>
        </div>
    </div>
</template>

<script setup name="Map" lang="ts">
const mapType = ref('GD');
const mapConfig = reactive({
    center: [116.471354, 39.994257],
    zoom: 16.8,
    controls: {
        className: 'amap-toolbar',
        groups: [
            {
                tag: 'span', //创建的控制器列表标签
                id: 'createPolygon', //控制器列的id, 用于监听控件的触发
                class: 'createPolygon', //控制器控件的自定义类名 （非必填）
                title: '绘制多边形', // 鼠标触碰提示的title （非必填）
                hasButtons: true, //是否显示按钮组
                buttons: {
                    id: 'polygonConfirm', //按钮组id, 可用于监听事件
                    class: '', // 自定义按钮组样式 （非必填）
                    children: ['完成', '重绘'],
                }, // 点击控件显示的按钮组
                svgIcon: 'polygon.svg', //控件的图标
            },
            {
                tag: 'span',
                id: 'createPolyline',
                class: 'createPolyline',
                title: '绘制折线',
                hasButtons: true,
                buttons: {
                    id: 'polylineConfirm',
                    class: '',
                    children: ['完成', '重绘'],
                },
                svgIcon: 'line.svg',
            },
            {
                tag: 'span',
                id: 'createMarker',
                class: 'createMarker',
                title: '标记点',
                hasButtons: true,
                buttons: {
                    id: 'markerConfirm',
                    class: '',
                    children: ['完成', '清空'],
                },
                svgIcon: 'map-marker-plus.svg',
                size: 17,
            },
        ],
    },
});

const handleMapEvent = (val) => {
    console.log(val);
};
</script>
